<template>
  <!--<Row>-->
    <!--<Card>-->

    <!--</Card>-->
  <!--</Row>-->
  <div>
    <Row>
      <Card>
        <Row :gutter="16">
          <Col span="2">
          <Button type="text" @click="toggleTime()">时间 <Icon :type="time"></Icon></Button>
          </Col>
          <Col span="2">
          <Button type="text" @click="toggleDistance()">距离 <Icon :type="distance"></Icon></Button>
          </Col>
          <Col span="2">
          <Button type="text" @click="togglePrice()">价格 <Icon :type="price"></Icon></Button>
          </Col>
        </Row>

        <Row :gutter="16" >
          <Col span="8">
          <Card >
            <img src="../../images/logo.jpg">
            <p class="smaller">滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研</p>
            <Row>
              <Col span="4"><h4>{{money}}￥</h4></Col>
              <Col span="14">
              <Row class="smaller">截止时间：{{deadline}}</Row>
              <Row class="smaller">{{gasStation}}</Row>
              </Col>
              <Col span="6">
              <Button type="primary">抢单</Button>
              </Col>
            </Row>
          </Card>
          </Col>
          <Col span="8">
          <Card >
            <img src="../../images/logo.jpg">
            <p class="smaller">滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研</p>
            <Row>
              <Col span="4"><h4>{{money}}￥</h4></Col>
              <Col span="14">
              <Row class="smaller">截止时间：{{deadline}}</Row>
              <Row class="smaller">{{gasStation}}</Row>
              </Col>
              <Col span="6">
              <Button type="primary">抢单</Button>
              </Col>
            </Row>
          </Card>
          </Col>
          <Col span="8">
          <Card >
            <img src="../../images/logo.jpg">
            <p class="smaller">滑道间隙过小或变形、以及润滑油牌号不当、油压低和流量过小、缺油造成十字头和滑道磨损过快或烧研</p>
            <Row>
              <Col span="4"><h4>{{money}}￥</h4></Col>
              <Col span="14">
              <Row class="smaller">截止时间：{{deadline}}</Row>
              <Row class="smaller">{{gasStation}}</Row>
              </Col>
              <Col span="6">
              <Button type="primary">抢单</Button>
              </Col>
            </Row>
          </Card>
          </Col>
        </Row>
      </Card>
    </Row>
  </div>
</template>
<style scoped>
  .smaller{
    font-size: 12px;
  }
  h4{
    color:#2d8cf0;
  }
  img{

  }
</style>
<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        model6: '',
        time:'android-arrow-down',
        distance:'android-arrow-down',
        price:'android-arrow-down',
        money:1200,
        deadline:'2017-10-25',
        gasStation:'xxx加气站'
      }
    },
    methods: {
      toggleTime(){
        if(this.time = 'android-arrow-down'){
          this.time = 'android-arrow-up';
        }else{
          this.time = 'android-arrow-down';
        }
      },
      toggleDistance(){
        this.distance = 'android-arrow-up';
      },
      togglePrice(){
        this.price = 'android-arrow-up';
      }
    }
  }
</script>
